<template>
  <cell style="align-items: center">
    <div :style="{width: width + 'px'}"
         :class="['commission-item-row', 'commission-item-row-' + layout, !iosShow && 'commission-item-row-ios-hide' ]">
      <template v-for="(item) in itemList">
        <div :class="['commission-item', 'commission-item-' + layout,
              (item.description && layout == 'list') && 'commission-item-outline',
              borderRadius && 'commission-item-border-radius']" :style="cellStyle"
             v-bind:key="item.id || item.sourceItemId"
             @click="commissionItemClick(item)">
          <image :src="item.picUrl" :style="{width: picWidth + 'px', height: picWidth + 'px'}" :class="['item-pic', 'item-pic-' + layout]" resize="cover"></image>
          <div :class="['commission-item-details-' + layout, (item.description && layout == 'list') && 'commission-item-details-outline']">
            <div class="item-title">
              <image :src="getPlatformIcon(item)" class="item-title-icon"></image>
              <text :class="['item-title-text', 'item-title-text-' + layout]">     {{item.title}}</text>
            </div>
            <div class="detail-row">
              <div class="price">
                <text class="price-y">¥</text>
                <text class="price-val">{{item.price}} </text>
              </div>
              <text class="origin-price">{{item.ecomPlatTitle}}价¥{{item.originPrice}}</text>
            </div>
            <div class="detail-row sales-row">
              <x-image v-if="markIcon" :src="markIcon" :height="25"></x-image>
              <text v-if="iosShow && showShare && ((item.econPlat !== 'TAOBAO' && item.econPlat !== 'TMALL') || item.tbkZt)" class="commission-value">自购省 ¥{{(item.shareCommission + item.rewardShareCommission).toFixed(2)}}</text>
              <div v-if="item.jdSale || item.freeShipment">
                <text class="free-jd-sale" v-if="item.jdSale">京东自营</text>
                <text class="free-shipment" v-else-if="item.freeShipment">包邮</text>
              </div>
            </div>
            <div class="detail-row">
              <div>
                <coupon :couponValue="item.couponValue" v-if="item.couponValue > 0"></coupon>
              </div>
              <text class="sales" v-if="item.sales !==  -1">月销{{item.sales}}</text>
              <text class="sales" v-if="item.sales === -1">预售</text>
            </div>
          </div>
          <div class="topbar">
            <text :class="['btn', 'topbar-btn', 'btn-md', 'btn-select', item._selected ? 'btn-success' : 'btn-warning']" v-if="showSelBtn" @click="selClick(item)">{{item._selected ? '已选择' : '+选品'}}</text>
            <text class="btn btn-primary topbar-btn btn-md btn-del" v-if="showDelBtn" @click="delClick(item)">删除</text>
          </div>
        </div>
        <div class="item-intro-panel" v-bind:key="item.id || item.sourceItemId" v-if="item.description && layout == 'list'">
          <text class="item-intro" @click="commissionItemClick(item)">{{item.description}}</text>
        </div>
      </template>
    </div>
  </cell>
</template>
<script>
let paddingValue = [0, 8]
let urlPath = require('../include/url-path')
require('../include/page-xdom')
let config = require('../include/app-config')
module.exports = {
  components: {
    coupon: require('./coupon.vue'),
    'x-image': require('./x-image.vue')
  },
  props: {
    itemList: {default: []},
    column: {default: 2},
    showDelBtn: {default: false},
    showSelBtn: {default: false},
    layout: {default: 'list'},
    width: {default: 750},
    borderRadius: {default: false},
    markIcon: {default: null},
    showShare: {default: true}
  },

  data () {
    return {
      itemWidth: 750,
      picWidth: 250,
      cellStyle: {},
      iosShow: false,
      markIconWidth: 1
    }
  },
  created () {
    config.bindConfig(this)
    this.handleLayout()
    this.$watch('layout', (newVal) => {
      this.handleLayout()
    })
  },
  methods: {
    handleLayout () {
      if (this.layout === 'grid') {
        this.itemWidth = (this.width - paddingValue[this.column - 1]) / this.column
        this.cellStyle.width = this.itemWidth + 'px'
        this.picWidth = this.itemWidth
      } else {
        this.cellStyle = {}
        this.picWidth = 240
      }
    },
    commissionItemClick (item) {
      this.$emit('commissionItemClick', item)
    },
    delClick (item) {
      this.$emit('commissionItemDel', item)
    },
    selClick (item) {
      item._selected = !item._selected
      this.$emit('commissionItemSel', item, item._selected)
    },
    getPlatformIcon (item) {
      return urlPath.assets('images/icon/platform/' + item.ecomPlat + '.png')
    }
  }
}
</script>
<style lang="scss">

  @import "../sass/var";
  @import "../sass/mixin";
  @import "../sass/icon";
  @import "../sass/buttons";
  .mark-icon {
    height: 25px;
    width: 1px;
  }

  .item-pic {
    &-list {
      margin: 10px;
      border-radius: 6px;
    }
    &-grid {
      margin-bottom: 10px ;
    }
  }

  .commission-value {
    font-size: 24px;
    color: $color-warning;
    height: 36px;
    line-height: 36px;
    padding: 0 5px ;
    border-radius: 5px;
  }

  .item-title {
    padding: 0 10px;
    &-text {
      font-size: 28px;
      color: $color;
      line-height: 32px;
      lines: 2;
      text-overflow: ellipsis;
      &-layout {
        font-size: 32px;
        line-height: 36px;
      }
    }

    &-icon {
      width: 32px;
      height: 32px;
      position: absolute;
      top: 0;
      left: 10px;
    }
  }

  $intro-color: #FAFFEB;

  .item-intro {
    padding: 20px;
    font-size: 26px;
    border-radius: 10px;
    background-color: $intro-color;
    color: $color;
    left: 0;
    right: 0;
    top: 0;
    &-panel {
      padding: 0 20px 10px;
      @include border-bottom(1, solid, #ddd);
      background-color: #ffffff;
    }
  }

  .commission-item {
    background-color: #fff;
    position: relative;
    flex-direction: column;
    margin-bottom: 8px;
    overflow: hidden;

    &-outline {
      /**
      @include border(5, solid, $intro-color);
      */
    }

    &-list {
      flex-direction: row;
      margin-bottom: 0px;
      align-items: center;
    }

    &-grid {

    }

    &-border-radius {
      border-radius: 10px;
    }

    &-wrapper {
      position: relative;
      flex: 1;
      background-color: #ffffff;
    }

    &-row {
      flex-direction: row;
      overflow: hidden;
      justify-content: space-between;
      &-list {
        flex-direction: column;
        /*height: 270;*/
      }
      &-grid {
        flex-direction: row;
        height: 600px;
      }
    }

    &-details {
      &-outline {
        @include border-bottom(0, solid, #ddd);
      }
      &-list {
        flex: 1;
        justify-content: space-between;
        @include border-bottom(1, solid, #ddd);
        padding: 15px;
        padding-left: 0px;
        margin-left: 10px;
        height: 270px;
      }
      &-grid {
        justify-content: space-between;
        @include border-bottom(0, solid, #ddd);
        flex: 1;
        padding-bottom: 10px;
      }
      &-info {
        &-grid {
          flex: 1;
          justify-content: space-between;
        }
      }
    }
  }

  .topbar {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    left: 0;
    align-items: center;
    justify-content: flex-end;
    justify-items: flex-end;
    flex-direction: row;
    &-btn {
      margin-left: 10px
    }
  }

  .detail-row {
    flex-direction: row;
    justify-content: space-between;
    padding: 0 10px;
    /*margin-bottom: 10px;*/
    align-items: center;
  }

  .sales-row {
    margin-bottom: 0;
  }

  .origin-price {
    color: $color-muted;
    font-size: 24px;
    font-weight: 100;
  }

  .sales {
    font-size: 24px;
    color: $color-muted;
  }

  .free-shipment {
    font-size: 24px;
    color: $color-warning;
  }

  .free-jd-sale {
    font-size: 24px;
    color: $color-primary;
  }

  .price {
    flex-direction: row;
    align-items: flex-end;
    &-title {
      color: $color;
      font-size: 28px;
      height: 28px;
      line-height: 28px;
    }
    &-y {
      font-size: 24px;
      height: 24px;
      line-height: 24px;
      color: $color-primary;
      font-weight: 100px;
    }
    &-val {
      color: $color-primary;
      font-size: 32px;
      height: 32px;
      line-height: 32px;
    }
  }

  .share-row {
    flex-direction: row;
    padding: 0 10px;
    align-items: center;
    /*justify-content: center;*/
    /*background-image: linear-gradient(to right, #fc7317, #f43119);*/
    /*background-color: #FAFAFA;*/
    $color-text: #f6f6f6;
    &-title {
      font-size: 24px;
      color: $color-warning;
      font-weight: 100;
    }
    &-price {
      flex-direction: row;
      align-items: flex-end;
      &-y {
        color: $color-warning;
        font-size: 28px;
      }
      &-val {
        color: $color-warning;
        font-size: 28px;
      }
    }
  }
  .btn-select, .btn-del{
    font-size: 28px;
    color: #FFFFFF;
  }
  .btn-select {
  }
</style>
